/******************** 变量 ********************/
$lv-menu-theme: #ffffff !default;
$lv-menu-color: $text-color !default;
$lv-menu-no-icon-split-line: #e6ebf5 !default;
$lv-menu-group-color: #4d4d4d !default;
$lv-menu-group-line: #e6e6e6 !default;
$lv-menu-disabled-color: rgba(#4d4d4d, 0.5) !default;
$lv-menu-active-bg: rgba(#2673e5, 0.06) !default;
$lv-menu-no-icon-active-color: #2673e5 !default;
$lv-menu-active-color: #2673e5 !default;
$lv-menu-hover-bg: #f7f7f7 !default;
$lv-menu-arrow-color: #808080 !default;
$lv-menu-arrow-color-hover: #4d4d4d !default;

$lv-menu-normal-color: #000000 !default;
$lv-menu-splitline: #baccff !default;
$lv-menu-activeline: $color-primary !default;

$lv-menu-theme-dark: #1f2129 !default;
$lv-menu-color-dark: #e6e6e6 !default;
$lv-menu-no-icon-split-line-dark: rgba(#ffffff, 0.15) !default;
$lv-menu-group-color-dark: #b0b0b0 !default;
$lv-menu-group-line-dark: rgba(#ffffff, 0.15) !default;
$lv-menu-disabled-color-dark: rgba(#808080, 0.5) !default;
$lv-menu-active-bg-dark: rgba(#000000, 0.5) !default;
$lv-menu-no-icon-active-color-dark: #3388ff !default;
$lv-menu-active-color-dark: #3388ff !default;
$lv-menu-hover-bg-dark: rgba(#000000, 0.3) !default;
$lv-menu-arrow-color-dark: #4d4d4d !default;
$lv-menu-arrow-color-hover-dark: #808080 !default;

$lv-menu-normal-color-dark: #e6e6e6 !default;
$lv-menu-disabled-color-dark: #535967 !default;
$lv-menu-splitline-dark: rgba($color-primary-2, 0.5) !default;

$lv-menu-activeline-dark: #3d80e1 !default;
$lv-top-menu-normal-color-dark: #f7faff !default;
$lv-top-menu-panel-bg-dark: #202228 !default;
$lv-top-menu-panel-normal-color-dark: $color-white !default;

/******************** mixin ********************/
@mixin menu-dark-item-disabled {
  color: $lv-menu-color-dark;
  cursor: not-allowed;
  opacity: 0.5;
}

/******************** 组件 ********************/
.lv-menu {
  color: $text-color-primary;
  font-size: $font-size-base;
  font-family: $font-family;
  line-height: $line-height-base;

  ul {
    width: 100%;
    margin: 0;
    padding: 0;
  }
}

/* 顶部导航菜单 */
.lv-menu.lv-top-menu {
  display: block;
  background: $lv-menu-theme-dark;

  ul {
    &.level0 {
      display: flex;
      align-items: center;
      justify-content: flex-start;
      height: 0.64rem;

      > li {
        flex: 0 0 auto;

        > .lv-menu-item {
          display: flex;
          align-items: center;
          justify-content: space-around;
          height: 0.64rem;
          color: $lv-top-menu-normal-color-dark;
          font-size: $font-size-lg;
          cursor: pointer;

          > i {
            display: none;
          }

          > span {
            display: inline-block;
            padding: 0 $padding-md;
          }

          &:not([disabled]):hover {
            color: $lv-menu-active-color-dark;
          }

          &[disabled] {
            @include menu-dark-item-disabled;
          }

          &.lv-menu-item-active,
          &.lv-menu-item-parent-active {
            position: relative;
            color: $lv-menu-active-color-dark;

            &::before {
              position: absolute;
              right: 0;
              bottom: 0;
              left: 0;
              z-index: 1;
              display: block;
              border-bottom: 0.03rem $border-style-base $lv-menu-active-color-dark;
              animation: activeBar 300ms;
              content: '';
            }
          }

          &.lv-menu-item-parent-hover {
            color: $lv-menu-active-color-dark;
          }
        }
      }
    }
  }
}

/* 左侧导航菜单 */
.lv-menu.lv-left-menu {
  display: block;
  color: $lv-menu-color;
  background: $lv-menu-theme;

  .lv-menu-title {
    position: sticky;
    top: 0;
    background: $lv-menu-theme;
    min-height: 0.48rem;
    padding: $padding-sm $padding-lg;
    font-size: $font-size-lg;
    line-height: 0.32rem;
    border-bottom: $border-width-base $border-style-base $lv-menu-no-icon-split-line; // border特殊处理
    z-index: 1;
  }

  ul {
    height: auto;
    overflow: hidden;

    > li {
      &:not(:first-child) {
        > .lv-group-item-title {
          margin-top: 0.08rem;
          padding-top: 0.16rem;
          border-top: $border-width-base $border-style-base $lv-menu-group-line;
        }
      }

      > .lv-group-item-title {
        display: flex;
        margin: 0 0.24rem;
        padding: 0.08rem 0;
        color: $lv-menu-group-color;

        > span {
          display: block;
          padding-left: 0.28rem;
          font-size: $font-size-sm;
          line-height: 0.16rem;
        }
      }

      > .lv-menu-item {
        display: flex;
        align-items: center;
        justify-content: space-around;
        cursor: pointer;

        > i {
          flex: 0 0 auto;

          &.lv-menu-item-icon {
            width: 0.24rem;
            height: $height-sm;
            margin-right: $margin-sm;
          }
        }

        > span {
          display: inline-block;
          width: 100%;
        }

        &:not([disabled]):hover {
          background-color: $lv-menu-hover-bg;

          .lv-select-trigger-icon {
            color: $lv-menu-arrow-color-hover;
          }
        }

        &[disabled] {
          color: $lv-menu-color;
          cursor: not-allowed;
          opacity: 0.5;
        }

        &.lv-menu-item-active,
        &.lv-menu-item-parent-active:not(.lv-menu-item-expanded) {
          position: relative;
          color: $lv-menu-no-icon-active-color;
          font-weight: $font-weight-bold;
          background-color: $lv-menu-active-bg;

          &:hover {
            background-color: $lv-menu-active-bg;
          }
        }
      }
    }

    &.level0 {
      padding: $padding-md 0;

      > li > .lv-menu-item {
        height: 0.48rem;
        padding: 0.12rem $padding-lg;
        font-size: $font-size-lg;
        line-height: $line-height-coeff-minor;
      }

      ul {
        position: relative;
      }

      li.lv-menu-submenu-expanded > ul {
        li:last-of-type {
          .lv-group-item-title + ul {
            padding-bottom: $padding-sm;
          }
        }
      }
    }

    &.level1 {
      > li > .lv-menu-item {
        padding: 0.05rem $padding-lg 0.05rem 0.52rem;

        &.lv-menu-item-active::before {
          left: 0.49rem;
        }
      }

      ul::before {
        left: 0.8rem;
      }
    }

    &.level2 {
      > li > .lv-menu-item {
        padding: 0.05rem $padding-lg 0.05rem 0.92rem;

        &.lv-menu-item-active::before {
          left: 0.79rem;
        }
      }
    }
  }

  // 图标模式
  &.lv-menu-icon {
    &.level0 {
      > li > .lv-menu-item {
        height: 0.48rem;
        padding: 0.12rem $padding-lg;
        font-size: $font-size-lg;
        line-height: $line-height-coeff-minor;

        &.lv-menu-item-active {
          color: $lv-menu-no-icon-active-color;
        }
      }
    }

    &.level1 {
      > li > .lv-menu-item {
        padding: 0.05rem $padding-lg 0.05rem 0.56rem;
        font-size: $font-size-base;
      }
    }

    &.level2 {
      > li > .lv-menu-item {
        padding-left: 0.92rem;
        font-size: $font-size-base;
      }
    }

    ul {
      > li > .lv-menu-item {
        .lv-menu-item-icon {
          display: block;
        }

        &.menu-item-active {
          color: $lv-menu-active-color;
        }

        &.lv-menu-item-expanded {
          & ~ ul {
            &::before {
              display: none;
            }
          }
        }
      }

      &.level0 ul {
        > li > .lv-menu-item {
          .lv-menu-item-icon {
            display: none;
          }
        }
      }
    }
  }

  //深色主题
  &.lv-theme-dark {
    color: $lv-menu-color-dark;
    background: $lv-menu-theme-dark;

    .lv-menu-title {
      border-bottom: none;
      background: $lv-menu-theme-dark;
    }

    ul {
      > li {
        &:not(:first-child) {
          > .lv-group-item-title {
            border-top: $border-width-base $border-style-base $lv-menu-group-line-dark;
          }
        }

        > .lv-group-item-title {
          color: $lv-menu-group-color-dark;
        }

        > .lv-menu-item {
          .lv-select-trigger-icon {
            color: $lv-menu-arrow-color-dark;
          }

          &[disabled] {
            @include menu-dark-item-disabled;
          }

          &:not([disabled]):hover {
            background: $lv-menu-hover-bg-dark;

            .lv-select-trigger-icon {
              color: $lv-menu-arrow-color-hover-dark;
            }
          }

          &.lv-menu-item-active,
          &.lv-menu-item-parent-active:not(.lv-menu-item-expanded) {
            color: $lv-menu-no-icon-active-color-dark;
            background-color: $lv-menu-active-bg-dark;

            &:hover {
              background-color: $lv-menu-active-bg-dark;
            }
          }
        }
      }

      &.level0 {
        ul {
          &::before {
            border-left: 0.03rem $border-style-base $lv-menu-no-icon-split-line-dark;
          }
        }
      }
    }

    .level0 > li > .menu-item {
      &.menu-item-active {
        color: $lv-menu-active-color-dark;
      }
    }

    // 图标模式
    &.lv-menu-icon {
      ul {
        > li > .lv-menu-item {
          &.menu-item-active {
            background-color: $lv-menu-active-bg-dark;
          }

          &.lv-menu-item-expanded {
            & ~ ul {
              &::before {
                display: none;
              }
            }
          }

          &.lv-menu-item-parent-active {
            &::before {
              border-left: 0.03rem $border-style-base $lv-menu-splitline-dark;
            }

            & ~ ul {
              &::before {
                top: 0;
                bottom: 0;
                left: 0;
                display: block;
                border-left: 0.03rem $border-style-base $lv-menu-splitline-dark;
              }
            }
          }
        }
      }
    }
  }

  // 横向折叠后的样式
  &.lv-menu-collapsed {
    width: 0;
    overflow: hidden;

    .lv-menu-title {
      display: none;
    }

    ul {
      &.level0 {
        padding: 0;
      }

      &.level1 {
        display: none;
      }
    }

    .lv-menu-item {
      > .lv-select-trigger-icon,
      > span {
        display: none;
      }
    }

    //图标模式
    &.lv-menu-icon {
      width: 0.72rem;
      overflow: auto;

      ul.level0 {
        overflow: visible;

        > li {
          > .lv-menu-item {
            > .lv-select-trigger-icon,
            > span {
              display: none;
            }

            > .lv-menu-item-icon {
              margin: 0;
            }

            &.lv-menu-item-parent-active {
              color: $lv-menu-no-icon-active-color;
              background-color: $lv-menu-active-bg;

              .lv-menu-item-icon {
                color: $lv-menu-active-color;
              }
            }

            &.lv-menu-item-parent-hover {
              background: $lv-menu-hover-bg;
            }
          }
        }
      }

      .lv-menu-panel {
        position: relative;

        ul {
          position: absolute;
          top: 0;
          left: 0.64rem;
          display: block;
          width: auto;
          min-width: 1rem;
          background: $color-white;
        }
      }

      &.lv-theme-dark {
        ul.level0 {
          > li {
            > .lv-menu-item {
              &.lv-menu-item-parent-active {
                color: $lv-menu-no-icon-active-color-dark;
                background-color: $lv-menu-active-bg-dark;

                .lv-menu-item-icon {
                  color: $lv-menu-active-color-dark;
                }
              }

              &.lv-menu-item-parent-hover {
                background: $lv-menu-hover-bg-dark;
              }
            }
          }
        }

        .lv-menu-panel {
          ul {
            background: $lv-menu-theme-dark;
          }
        }
      }
    }
  }
}

.lv-left-menu-panel {
  min-width: 1rem;
  margin-left: 0.08rem;
  overflow: hidden;
  background: $lv-menu-theme;
  border-radius: 0.04rem;
  box-shadow: 0 0.02rem 0.08rem 0 rgba(26, 26, 26, 0.15);

  > li {
    > .lv-menu-item {
      display: flex;
      align-items: center;
      justify-content: space-around;
      padding: 0.05rem $padding-sm;
      cursor: pointer;

      > i {
        flex: 0 0 auto;
      }

      > span {
        display: inline-block;
        width: 100%;
      }

      > span {
        display: block;
        width: 100%;
      }

      &[disabled] {
        color: $lv-menu-color;
        cursor: not-allowed;
        opacity: 0.5;
      }

      &:not([disabled]):hover {
        background-color: $lv-menu-hover-bg;

        .lv-select-trigger-icon {
          color: $lv-menu-arrow-color-hover;
        }
      }

      &.lv-menu-item-active,
      &.lv-menu-item-parent-active {
        position: relative;
        color: $lv-menu-no-icon-active-color;
        background-color: $lv-menu-active-bg;

        &:hover {
          background-color: $lv-menu-active-bg;
        }
      }

      &.lv-menu-item-parent-hover {
        background: $lv-menu-hover-bg;
      }
    }
  }

  &.lv-theme-dark {
    background: $lv-menu-theme-dark;

    > li {
      > .lv-group-item-title {
        margin: 0 $margin-sm;
        padding: $padding-sm 0 $padding-xs;
        color: $lv-menu-group-color-dark;
        font-size: $font-size-sm;
        border-bottom: $border-width-base $border-style-base $lv-menu-group-line-dark;
      }

      .lv-menu-item {
        padding: 0.05rem $padding-sm;
        color: $lv-menu-color-dark;

        &[disabled] {
          @include menu-dark-item-disabled;
        }

        &:not([disabled]):hover {
          background: $lv-menu-hover-bg-dark;

          .lv-select-trigger-icon {
            color: $lv-menu-arrow-color-hover-dark;
          }
        }

        &.lv-menu-item-active,
        &.lv-menu-item-parent-active {
          color: $lv-menu-no-icon-active-color-dark;
          background-color: $lv-menu-active-bg-dark;

          &:hover {
            background-color: $lv-menu-active-bg-dark;
          }
        }

        &.lv-menu-item-parent-hover {
          background: $lv-menu-hover-bg-dark;
        }
      }
    }
  }
}

.lv-top-menu-panel {
  &.level1 {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 0.22rem 0.16rem 0;
    background: $lv-top-menu-panel-bg-dark;
    box-shadow: 0 0.04rem 0.08rem 0 rgba(0, 0, 0, 0.2);

    > li {
      min-width: 0.5rem;
      padding: 0 0.16rem 0.2rem;

      > .lv-menu-item {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        height: 0.36rem;
        margin-bottom: 0.05rem;
        padding-left: 0.05rem;
        color: $lv-top-menu-panel-normal-color-dark;
        font-size: 0.16rem;
        line-height: 0.36rem;

        > i {
          flex: 0 0 auto;
        }

        > span {
          display: inline-block;
        }

        &[disabled] {
          @include menu-dark-item-disabled;
        }

        &.lv-menu-item-active {
          color: $lv-menu-active-color-dark;
        }

        &.lv-menu-item-activable {
          cursor: pointer;

          &:not([disabled]):hover,
          &:not([disabled]):hover i {
            color: $lv-menu-active-color-dark;
          }
        }
      }
    }
  }

  &.lv-top-menu-panel-full {
    width: 100vw;
    height: 70vh;
    overflow-y: scroll;
  }

  ul.level2 {
    > li {
      margin-bottom: 0.02rem;

      > .lv-menu-item {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        height: $height-base;
        padding-left: 0.05rem;
        color: $lv-menu-normal-color-dark;
        line-height: 0.32rem;
        cursor: pointer;

        > i {
          flex: 0 0 auto;
        }

        > span {
          display: inline-block;
          width: 100%;
        }

        &:not([disabled]):hover,
        &:not([disabled]):hover i {
          color: $lv-menu-active-color-dark;
        }

        &[disabled] {
          @include menu-dark-item-disabled;
        }

        &.lv-menu-item-active {
          color: $lv-menu-active-color-dark;
        }

        &.lv-menu-item-parent-active {
          color: $lv-menu-active-color-dark;
        }

        &.lv-menu-item-parent-hover {
          background: $lv-menu-theme-dark;
        }
      }
    }
  }

  &:not(.level1),
  ul:not(.level2) {
    min-width: 1rem;
    padding: 0;
    background: $lv-menu-theme-dark;
    box-shadow: 0 0.04rem 0.08rem 0 rgba(0, 0, 0, 0.2);

    li {
      > .lv-menu-item {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        height: 0.3rem;
        padding: 0 $padding-md;
        color: $lv-menu-normal-color-dark;
        line-height: 0.3rem;
        cursor: pointer;

        > i {
          flex: 0 0 auto;

          .lv-menu-item-icon {
            display: none;
          }
        }

        > span {
          display: inline-block;
          width: 100%;
        }

        &:not([disabled]):hover {
          color: $lv-menu-active-color-dark;
        }

        &[disabled] {
          @include menu-dark-item-disabled;
        }

        &.lv-menu-item-active {
          color: $lv-menu-active-color-dark;
        }

        &.lv-menu-item-parent-active {
          color: $lv-menu-active-color-dark;
        }
      }
    }
  }
}

.lv-top-menu-overlay-panel {
  overflow: hidden;

  > ul {
    &::after {
      position: absolute;
      top: 0;
      right: 0;
      left: 0;
      display: block;
      background: rgba(0, 0, 0, 0);
      content: '';
    }
  }

  &.no-mouse-events {
    > ul {
      &::after {
        bottom: 0;
      }
    }
  }
}

.lv-menu-z-index {
  z-index: $zindex-menu;
}

@keyframes activeBar {
  from {
    right: 50%;
    left: 50%;
  }

  to {
    right: 0;
    left: 0;
  }
}
